基于微信公众号的多房间实时弹幕消息系统

项目起始原因

源于数据库课设和以前的一次突发奇想。其实还有其他微信公众号的弹幕系统，但是我发现使用体验不佳，因为那种弹幕系统都是私用，并且只支持同时进行一个房间的使用。所以便萌生了自己写一个的想法。（第一次写md，有点不会，希望谅解--）

主要技术点

Redis（结合socket实现在非socket中主动发送socket消息）
MySQL（数据持久化）
socket.io（实现消息实时推送）
Express（后端主要使用框架）

实现的主要技术点和难点

接受微信服务器的消息推送

微信服务器推送的消息，我们在Express中通过data数据流的形式接受，然后xml转为json格式。即得到我们需要的数据。部分代码如下(getXml为封装的函数用于处理数据)：

//  处理上传消息请求
let promise = new Promise((resolve,reject) => {
  let buffer = [];
  //监听 data 事件 用于接收数据
  req.on('data',chunk => {
      buffer.push(chunk);
  });
  //监听 end 事件 用于处理接收完成的数据
  req.on('end',() => {
      let msgXml = Buffer.concat(buffer).toString('utf-8');
      xml.xmltool.getXml(msgXml).then(datas => {
          resolve(JSON.stringify(datas.xml));
      }).catch(e => {
          reject(JSON.stringify(e));
      })
  })
});

websocket（socket.io）

socket.io是已经封装好的一个库。我们只需要安装之后，就可方便的使用。同时借助Redis实现在非socket接口中推送socket消息流。需要使用到的模块主要是：

socket.io
socket.io-redis
socket.io-emitter

部分核心代码如下（作为一个模块导出直接使用）：

const redis = require('redis');
const ioRedis = require('socket.io-redis');

// var roomInfo = {};

let ioCreater = function(server) {
    const io = require('socket.io')(server);
    io.on('connection', function (socket) {

        var url = socket.request.headers.referer;
        var splited = url.split('/');
        var roomID = splited[splited.length - 1];   // 获取房间ID
        // var user = '';
        console.log(socket.request.headers);
        console.log(roomID);
        socket.join(roomID);    // 加入房间

       
        socket.on('disconnect', function(){    //断开socket连接的时候触发
            console.log('user disconnected');
        });
        socket.on('message', function(){  //接收socket连接消息的时候触发
            console.log('received a message');
        });
        socket.on('connect', function(){  //建立socket连接时候触发
            console.log('connect a socket client');
        });

    });

    io.adapter(ioRedis({host:"127.0.0.1", port:"6379" })); //使用socket.io-adapter设置缓存依赖
    return io; 
};
 module.exports = ioCreater;

多房间

在使用socket.io的时候，我们很方便的就可以创建socket.io多房间。我们只需要在socket连接的时候带上参数即可。所以在初始化的时候，我们需要将房间号发到前端，前端拿到之后，创建相应的socket连接即可。同时前端页面可以直接使用node_modules里面的socket包。

    <script src="/socket.io/socket.io.js"></script>
    <script>
              var socket = io.connect('http://localhost');
    </script>

弹幕实现

因为课设有时间限制的原因，所以没有自己去手动实现弹幕效果，我直接在github上面找了一个基于jQuery的弹幕插件。jQuery.danmu.js（体验还不错）部分核心代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="/javascripts/jquery.min.js"></script>
    <script src="/javascripts/jquery.danmu.min.js"></script>
    <!--jquery.danmu.js (//github.com/chiruom/danmu/) - Licensed under the MIT license-->
  </head>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html{
      width: 100%;
      height: 100%;
    }
    body{
      height: 100%;
      margin: 0;
    }
    #danmu{
      height: 100%;
      width: 100%;
    }
    #father{
      height: 100%;
      width: 100%;
    }
  </style>
  <body>
  <div id="father">
    <div id="danmu"></div>
  </div>
  <!--<button type="button" onclick="zanting()">暂停</button>-->
    <script src="/socket.io/socket.io.js"></script>
    <script>
        function bg3(){
            var r=Math.floor(Math.random()*256);
            var g=Math.floor(Math.random()*256);
            var b=Math.floor(Math.random()*256);
            return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
        }

      $('body').css('margin','0');
      $('body').css('padding','0');
      var width = document.body.scrollWidth;
      var height = document.body.scrollHeight-$('#father').scrollTop;
      $("#danmu").danmu({
            height: height,
            width: width,
            zindex :100,   //弹幕区域z-index属性
            speed:7000,      //滚动弹幕的默认速度，这是数值值得是弹幕滚过每672像素所需要的时间（毫秒）
            sumTime:65535,   //弹幕流的总时间
            danmuLoop:true,   //是否循环播放弹幕
            defaultFontColor:"#FFFFFF",   //弹幕的默认颜色
            fontSizeSmall:24,     //小弹幕的字号大小
            FontSizeBig:32,       //大弹幕的字号大小
            opacity:"0.9",            //默认弹幕透明度
            topBottonDanmuTime:6000,   // 顶部底部弹幕持续时间（毫秒）
            SubtitleProtection:true,     //是否字幕保护
            positionOptimize:false,         //是否位置优化，位置优化是指像AB站那样弹幕主要漂浮于区域上半部分

            maxCountInScreen: 40000,   //屏幕上的最大的显示弹幕数目,弹幕数量过多时,优先加载最新的。
            maxCountPerSec: 10000      //每分秒钟最多的弹幕数目,弹幕数量过多时,优先加载最新的。
        });

        $('#danmu').danmu('danmuStart');
      function zanting() {
          $('#danmu').danmu('danmuPause');
      }
      var socket = io.connect('http://localhost');

      socket.on('news', function (data) {
          console.log(data.data);
          var time = $('#danmu').data("nowTime") +1;
          var color = bg3(),size = '1';
          // var position = Math.floor(Math.random()*3);
          var position = '0';
          var text_obj = '{ text:"' + data.data + '",color:"' + color + '",size:"' + size + '",position:"' + position + '",time:' + time + '}';   //构造加上了innew属性的字符串danmu对象
          var new_obj = eval('(' + text_obj + ')');
          $("#danmu").danmu("addDanmu",new_obj);
          socket.emit('my other event', { my: 'data' });
      });
    </script>
  </body>
</html>

写在最后的话

代码很粗糙，如果有参考价值的话，希望多多支持。如果有不懂得地方，请提出来，我会尽我全力为您解答的。附上github地址，如果对您有帮助的话，希望给我一个小小的star，这是对我最大的鼓励和支持，前端的路很长，我希望自己能坚持下去！！共勉

github地址

基于微信公众号的多房间实时弹幕消息系统

项目起始原因

主要技术点

实现的主要技术点和难点

接受微信服务器的消息推送

websocket（socket.io）

多房间

弹幕实现

写在最后的话

Ranger

引用和评论

基于Koa和Typesciprt的类springmvc框架

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

在Java程序中监听mysql的binlog

开发插件集合

JS校验身份证号